<template>
	<view>
		<view class="my_date_select_box">
			<view class="top-box">
				<view @click="topWeek" class="left">
					<image class="img-one" src="https://storage.ganorglobal.com/miniapp-service/static/pub-img/shijianjihuazuo.png" mode=""></image>
					<image v-if="leftImg" class="img-tow" src="https://storage.ganorglobal.com/miniapp-service/static/pub-img/xiyizhou.png" mode=""></image>
					<image v-else class="img-tow" src="https://storage.ganorglobal.com/miniapp-service/static/pub-img/shangyizhou.png" mode=""></image>
					<text>上周</text>
				</view>

				<view @click="open" class="center">
					{{dayData}}
				</view>

				<view @click="nextWeek" class="left">
					<text>下周</text>
					<image v-if="rightImg" class="img-tow" src="https://storage.ganorglobal.com/miniapp-service/static/pub-img/shangyizhou.png" mode=""></image>
					<image v-else class="img-tow" src="https://storage.ganorglobal.com/miniapp-service/static/pub-img/shangyizhou.png" mode=""></image>
					<image class="img-one" src="https://storage.ganorglobal.com/miniapp-service/static/pub-img/shijianjihuayou.png" mode=""></image>
				</view>
			</view>
			<!-- @click="select_date(item.id)" -->
			<view class="week">
				<view class="date">
					<text class="week_to" v-for="(item,index) in week" :key="index">{{item}}</text>
				</view>
			</view>
			<view class="week weekfirs">
				<view class="date">
					<text class="date_to" @click="select_date(item,index)" v-for="(item,index) in weekdays" :key="index" :class="{blue:item.day==date}">{{item.day}}</text>
				</view>
			</view>
		</view>

		<!-- 日历组件 -->
		<calendar ref="calendar" :insert="false" @confirm="confirm" />
	</view>
</template>

<script>
	import calendar from "@/components/uni-calendar/uni-calendar"
	export default {
		components: {
			calendar,
		},
		props:{
			defaultDate: {
				type: String
			},
		},
		data() {
			return {
				timeId: 0,
				week: ['一', '二', '三', '四', '五','六','日'],
				weekday: [],
				weekdays: [],
				date: '',
				startTime: '',
				rightImg: true,
				leftImg: true,
				dayData: ''
			};
		},

		activated(){
			this.dayData = this.defaultDate
			if(this.dayData != ''){
				let date = new Date(this.dayData) //  只用来判断
				this.date = date.getDate() // 只用来判断
				this.startTime = Number(date) // 开始时间
				this.dayData = this.dateFormat(date, 'yyyy-MM-dd') // 只用来展示
			}
		},
		
		mounted() {
			
			this.dayData = this.defaultDate
			if(this.dayData != ''){
				let date = new Date(this.dayData) //  只用来判断
				this.date = date.getDate() // 只用来判断
				this.startTime = Number(date) // 开始时间
				this.dayData = this.dateFormat(date, 'yyyy-MM-dd') // 只用来展示
			}
			
			let weeks = this.getDates(this.defaultDate)
			let arr = weeks.map(res=>{
				return	{date :res.replace(/\//g, '-') }
			})
			this.weekday = weeks.map(res => {
				let i = res.split('-')
				return {day :i[2]}
			})
			let newArr = arr.map((item,index)=>{
				return {...item,...this.weekday[index]}
			})
			this.weekdays = newArr;
			console.log(this.dayData)
			if(this.dayData == ''){
				let date = new Date() //  只用来判断
				this.date = date.getDate() // 只用来判断
				this.startTime = Number(date) // 开始时间
				this.dayData = this.dateFormat(date, 'yyyy-MM-dd') // 只用来展示
			}
		},
		onShow() {
			// this.$emit('weekDays',this.weekdays);
		},
		methods: {
			open() {
				this.$refs.calendar.open(); // 打开日历
			},
			confirm(e) {
				this.dayData = e.fulldate
				this.$emit('getDay',this.dayData) // 传给父组件
				let new_Date = new Date(this.dayData)
				this.startTime = new_Date   // 重新赋值给开始时间
				var timesStamp = new_Date.getTime();
				var currenDay = new_Date.getDay();
				var dates = [];
				for (var i = 0; i < 7; i++) { // 5表示星期1~5，7表示 1~7 
					dates.push(this.dateFormat(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)), 'yyyy-MM-dd'))
				}
				let arr = dates.map(res=>{
					return	{date :res.replace(/\//g, '-') }
				})
				this.weekday = dates.map(res => {
					let i = res.split('-')
					return {day :i[2]}
				})
				let newArr = arr.map((item,index)=>{
					return {...item,...this.weekday[index]}
				})
				this.weekdays = newArr
				this.$emit('weekList',dates);
				console.log('日历选择',dates)
				this.date = e.date
			},
			// 选择 xx 天
			select_date: function(item, index) {
				this.$emit('getDay',item.date) // 传给父组件
				this.date = item.day
				this.dayData = item.date
			},
			// 下周
			nextWeek: function() {
				this.rightImg = !true
				this.leftImg = true
				// let startTime = Number(new Date())
				let endTime = this.startTime * 1 + 86400 * 7 * 1000;
				let new_Date = new Date(endTime)  //把时间戳转换为标准时间
				this.startTime = new_Date   // 重新赋值给开始时间
				this.dayData =  this.dateFormat(new_Date, 'yyyy-MM-dd')
				this.$emit('getDay',this.dayData) // 传给父组件
				var timesStamp = new_Date.getTime();
				var currenDay = new_Date.getDay();
				var dates = [];
				for (var i = 0; i < 7; i++) {
					dates.push(this.dateFormat(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)), 'yyyy-MM-dd'))
				}
				let arr = dates.map(res=>{
					return	{date :res.replace(/\//g, '-') }
				})
				this.weekday = dates.map(res => {
					let i = res.split('-')
					return {day :i[2]}
				})
				let newArr = arr.map((item,index)=>{
					return {...item,...this.weekday[index]}
				})
				this.weekdays = newArr
				this.$emit('weekList',dates);
				this.date = new Date(this.dayData).getDate() // 只用来判断
				console.log("----------",this.date)
			},
			// 上周
			topWeek: function() {
				this.leftImg = !true
				this.rightImg = true
				// let startTime = Number(new Date())
				let endTime = this.startTime - 86400 * 7 * 1000;
				let new_Date = new Date(endTime)
				this.startTime = new_Date // 初始化开始时间
				this.dayData =  this.dateFormat(new_Date, 'yyyy-MM-dd')
				this.$emit('getDay',this.dayData) // 传给父组件
				var timesStamp = new_Date.getTime();
				var currenDay = new_Date.getDay();
				var dates = [];
				for (var i = 0; i < 7; i++) {
					dates.push(this.dateFormat(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)), 'yyyy-MM-dd'))
				}
				let arr = dates.map(res=>{
					return	{date :res.replace(/\//g, '-') }
				})
				this.weekday = dates.map(res => {
					let i = res.split('-')
					return {day :i[2]}
				})
				console.log(this.weekday)
				let newArr = arr.map((item,index)=>{
					return {...item,...this.weekday[index]}
				})
				this.weekdays = newArr
				this.$emit('weekList',dates);
				this.date = new Date(this.dayData).getDate() // 只用来判断
			},
			// 获取1~5的时间
			getDates: function(defaultDate) {
				var new_Date = new Date(defaultDate)
				var timesStamp = new_Date.getTime();
				var currenDay = new_Date.getDay();
				var dates = [];
				for (var i = 0; i < 7; i++) { // 5表示星期1~5，7表示 1~7 
					dates.push(this.dateFormat(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7)), 'yyyy-MM-dd'))
				}
				console.log(dates)
				return dates
			},

			
		}
	}
</script>

<style lang="scss">
	.weekfirs {
		margin-top: 5px !important;
	}
</style>
